@mainColor:#0288D1;
@secondaryColor:#F2F2F4;
@backgroundColor:#fff;
@width:1190px;
html{
    height:100%;
}
body{
    font-size:12px;
    overflow-y:scroll;
    position:relative;
    height:100%;
    // scrollbar-base-color: #657690;
    // scrollbar-3dlight-color: #657690;
    // scrollbar-highlight-color: #657690;
    // scrollbar-track-color: #424f63;
    // scrollbar-arrow-color: #fff;
    // scrollbar-shadow-color: #657690;
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background-color: #E5E5E5;
}
/* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-thumb {
  background-color: #8EB1C5;
}
/* 滑块颜色 */
::-webkit-scrollbar-button {
  background-color: #E5E5E5;
}
/* 滑轨两头的监听按钮颜色 */
::-webkit-scrollbar-corner {
  background-color: #f00;
}
p,h1,h2,h3,h4,h5,h6{
    margin:0;
    padding:0;
}
ul,li{
    list-style:none;
    padding:0;
    margin-bottom:0;
}
a{
    color:#666;
    &:hover{
        text-decoration:none;
    }
    &:active{
         text-decoration:none;
    }
    &:visited{
        text-decoration:none;
    }
    &:focus{
        text-decoration:none;
    }
}
// .btn{
//     background:@mainColor;
//     color:#fff;
//     margin-right:10px;
//     border:1px solid #e5e5e5;
// }
.text-success{
    color:#16bb5c;
}
.text-primary{
    color:#009bdb;
}
.text-warining{
    color:#c62f2f;
}
.mask{
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.10);
    position:absolute;
    top:0;
    left:0;
    .load{
        position:absolute;
        top:45%;
        left:48%;
    }
}
.toast{
    width:100%;
    // height:100%;
    position:fixed;
    top:400px;
    text-align:center;
    div{
        display:inline-block;
        padding:15px 30px;
        // border:1px solid @mainColor;
        border-radius:8px;
        background:rgba(0,0,0,0.7);
        color:#fff;
        font-size:18px;
        } 
}
input.ui-select-search{
    width:100% !important;
}
// .section section#notice .panel-right #sendBox input{
//     width:100% !important;
// }
// .ui-select-bootstrap>.ui-select-match>.btn{
//     background:#fff;
//     border-color:#ccc;
//        display: inline-block;
//     padding: 6px 12px;
//     margin-bottom: 0;
//     font-size: 14px;
//     font-weight: 400;
//     line-height: 1.42857143;
//     text-align: center;
//     white-space: nowrap;
//     vertical-align: middle;
//     -ms-touch-action: manipulation;
//     touch-action: manipulation;
//     cursor: pointer;
//     -webkit-user-select: none;
//     -moz-user-select: none;
//     -ms-user-select: none;
//     user-select: none;
//     background-image: none;
//     border: 1px solid transparent;
//     border-radius: 4px;
//     width:100%;
// }
table.record{
    th,td{
        padding:0;
        height:35px;
        line-height:35px;
        text-align:center;
        font-weight:normal;
        }
        td{
            border:none !important;
            border-bottom:1px solid #e5e5e5;
        }
}
.headerDirective{
    background:@secondaryColor;
    position: relative;
    ul{
        width:@width;
        margin:0 auto;
        height:50px;
        li{
            a{
                display:inline-block;
                line-height:50px;
                margin-left:30px;
                i{
                    display:inline-block;
                    width:16px;
                    height:16px;
                    margin-right:5px;
                    position:relative;
                    top:4px;
                }
                img{
                    width:158px;
                }
            }
            a.coat{
                margin-left: 0px;
                i{
                    background:url("../images/iconbg.png") -255px 0 no-repeat;
                }
            }
            a.notice{
                margin-left: 14px;
                i{
                    background:url("../images/notice.png")
                } 
            }
            a.userName{
                i{
                    background:url("../images/user.png")
                } 
            }
            a.loginOut{
                i{
                    background:url("../images/login-out.png")
                } 
            }
        }
    }
    div.color-coat{
        width: 250px;
        height: 205px;
        background: url('../images/iconbg.png') 0 -250px no-repeat;
        position: absolute;
        top: 47px;
        left: 1300px;
        padding: 25px 20px;
        ul{
            li{
                a{
                    display: inline-block;
                    width: 42px;
                    height: 42px;
                    margin: 0;
                    margin-right: 14px;
                }
            }           
        }
        ul:nth-child(1){
             li:first-child{
                a{
                    background: url('../images/iconbg.png') 0 0 no-repeat;
                }
            }
            li:nth-child(2){
                a{
                    background: url('../images/iconbg.png') -61px 0 no-repeat;
                }
            }
            li:nth-child(3){
                a{
                    background: url('../images/iconbg.png') -125px 0 no-repeat;
                }
            }
             li:nth-child(4){
                a{
                    background: url('../images/iconbg.png') -190px 0 no-repeat;
                }
            }
        }
        ul:nth-child(2){
            margin-top: 8px;
             li:nth-child(1){
                a{
                    background: url('../images/iconbg.png') 0px -87px no-repeat;
                }
            }
            li:nth-child(2){
                a{
                    background: url('../images/iconbg.png') -61px -87px no-repeat;
                }
            }
             li:nth-child(3){
                a{
                    background: url('../images/iconbg.png') -125px -87px no-repeat;
                }
            }
             li:nth-child(4){
                a{
                    background: url('../images/iconbg.png') -190px -87px no-repeat;
                }
            }
        }
        ul:nth-child(3){
            margin-top: 8px;
             li:nth-child(1){
                a{
                    background: url('../images/iconbg.png') 0px -176px no-repeat;
                }
            }
            li:nth-child(2){
                a{
                    background: url('../images/iconbg.png') -61px -176px no-repeat;
                }
            }
             li:nth-child(3){
                a{
                    background: url('../images/iconbg.png') -125px -176px no-repeat;
                }
            }
             li:nth-child(4){
                a{
                    background: url('../images/iconbg.png') -190px -176px no-repeat;
                }
            }
        }
    }
}
.navDirective{
    background:@backgroundColor;
    ul{
        height: 50px;
         width:1200px;
         margin:0 auto;
         li{
             &:hover{
                 background:none;
             }
            a{
                display:block;
                width:150px;
                height: 50px;
                line-height:50px;
                text-align:center;
                font-size:18px;
                padding:0;
                border:none;
                margin-right:0;
                &:hover{
                    color:@mainColor;
                    font-weight:bold;
                    background:none;
                }
                &.active{
                     color:@mainColor;
                    font-weight:bold;
                    background:none;
                }
            } 
         }
         
       
    }
   ul.nav-tabs{
        border:none;
    }
}
.secondaryNavDirective{
    .panel-body{
        padding:0 15px;
        a{
            display:inline-block;
            width:100px;
            text-align:center;
            line-height:45px;
            font-size:14px;
        }
        a.active{
            font-weight:bold;
            color:#333;  
        }
    }  
}
.footerDirective{
     background:#fff;
     .footerBox{
         width:@width;
         margin:0 auto;
         padding:30px 75px;
         .footerItem{
             margin:0 45px;
             li{
                 height: 30px;
                 line-height: 30px;
             }
             span{
                 display:block;
                //  text-align:center;
                 height: 30px;
                 line-height: 30px;
             }
             img.logo{
                display: block;
                width: 131px;
                height: 52px;
                margin-top: 22px;
             }
         }
         
     }
     .copyRight{
         background:@secondaryColor;
         text-align:center;
         margin:0 auto;
         line-height:30px;
     }
}
.buttonGroupDirective{
    .btn{
        background:#F2F2F2;
        color:#333;
        margin-right: 5px;
        padding: 6px 18px;
        border: 1px solid rgb(204, 204, 204);
        outline: none;
        font-size: 14px;
    }
    .btn.active{
        background:@mainColor;
        color:#fff;
        border: 1px solid @mainColor;//rgb(70, 158, 229);
        outline: none;
    }
}
.section{
    background:#CBCEDA  ;
    background-position:center;
    background-attachment: fixed;
    section{
        width:@width;
        margin:0 auto;
        min-height:500px;
        padding-top:15px;
        padding-bottom:50px;
    }
    section#index{
        background:rgba(131,146,167,0.5);
        padding:15px;
        .panel-left{
            width:22%;
            margin-right:1%;
        }
        .panel-right{
            width:77%;
        }
        .page-top{
            .panel-left{
                width: 255px;
                padding:0 14px;
                .panel-heading{
                     border-bottom:1px solid #e5e5e5;
                    //  height: 66px;
                    //  padding: 10px 15px;
                    .userImg{
                        width:66px;
                        height:66px;
                        margin-right:20px;                  
                        img{
                            width:100%;
                        }
                    }
                    .userOther{
                         height: 66px;
                         position: relative;
                        p{
                            margin:12px 0 6px 0;
                            text-align:center;
                            width: 66px;
                        }
                        a{
                            position: absolute;
                            bottom: 10px;
                            display:inline-block;
                            background:@mainColor;
                            color:#fff;
                            padding:0 7px;
                            width: 66px;
                            line-height:18px;
                            border-radius: 3px;
                        }
                    
                    }
                }
                .panel-body{
                    padding:5px 10px;
                    p{
                        line-height:25px;
                    }
                }
                .panel-footer{
                    background:none;
                    padding:5px 0;
                    height: 63px;
                    position: relative;
                    &>div{
                        line-height:25px;
                        padding-left:10px;
                        span{
                            text-align:center;
                            display:inline-block;
                            &:first-child{
                                width:80px;
                                margin-right:5px;
                            }
                            i{
                                color:@mainColor;
                            }   
                    }
                    }
                }
            }
            .panel-right{
                width: 893px;
                height: 310px;
                .panel-heading{
                    line-height:18px;
                    border-bottom:1px solid #e5e5e5;
                    &>div{
                        position:relative;
                        top:-2px;
                        color:@mainColor;
                    }
                    &>a{
                         position:relative;
                        top:2px;
                        color:@mainColor;
                    }
                    i{
                        display:inline-block;
                        width:20px;
                        height:18px;
                        background:url("../images/4.png") no-repeat;
                        position:relative;
                        top:4px;
                        margin-right:5px;
                    }
                    b{
                        font-size:16px;
                    }
                    em{
                        font-style:normal;
                        font-size:16px;
                        margin-left:10px;
                    }
                }
                .panel-body{
                    height:215px;
                    p{
                        margin-bottom:16px;
                        span{
                            color:@mainColor;
                            margin-right:5px;
                        }
                    }
                }
                .courseItem{
                    margin:8px 0;
                    & > span{
                        display:block;
                        width:18%;
                        overflow:hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    &>.progress{
                        width:59%;
                        margin-left:10px;
                        height:17px;
                        .progress-bar{
                            background:@mainColor;
                        }
                    }
                    &>.progressNum{
                        width:11%;
                        color:@mainColor;
                        text-align:center;
                    }
                    &>a{
                        width:10%;
                        background:@mainColor;
                        text-align:center;
                        color:#fff;
                        border-radius:4px;
                    }
                }
            }
        }
        .page-middle{
            .panel-left{
                height: 234px;
                padding:0 5px;
                .panel-heading{
                    border-bottom:1px solid #e5e5e5;
                    b{
                        display:block;
                        text-align:center;
                        font-size:16px;
                        color:@mainColor;
                        
                    }
                }
                .panel-body{
                    a{
                        display: block;
                        font-size:12px;
                        background:@mainColor;
                        color:#fff;
                        padding: 0;
                        width: 214px;
                        height: 34px;
                        line-height: 34px;
                        em{
                            display: inline-block;
                            width: 18px;
                            height: 18px;
                            vertical-align: middle;
                            margin-right: 10px;
                        }
                    }
                    a:first-child{
                        em{
                            background: url("../images/iconicon.png") 0 -30px no-repeat;
                        }
                    }
                    a:nth-child(2){
                        em{
                            background: url("../images/iconicon.png") 0 -66px no-repeat;
                            margin-left: 10px;
                        }
                    }
                    a:nth-child(3){
                        em{
                            background: url("../images/iconicon.png") 0 -99px no-repeat;
                        }
                    }
                    a:nth-child(4){
                        em{
                            background: url("../images/iconicon.png") 0 -133px no-repeat;
                        }
                    }
                }
            }
            .panel-right{
                height: 234px;
                &>a{
                    color:@mainColor;
                    position:relative;
                    top:15px;
                    right:15px;
                }
                .nav{
                    li{
                        font-size:16px;
                        font-weight:bold;
                        a{
                            color:#333;
                            i{
                                display:inline-block;
                                width:18px;
                                height:18px;
                                margin-right:10px;
                                position:relative;
                                top:2px; 
                            }
                        }
                        
                    }
                    li.active{
                        color:@mainColor;
                        border-bottom-color:@mainColor;
                        a{
                            color:@mainColor;
                            i{
                                background:url("../images/5.png");
                            }
                        }
                       
                    }
                }
                .panel-body{
                    height:187px;
                    .noticeItem{
                        margin-bottom:10px;
                        a{
                            display:block;
                            .index{
                                width:14px;
                                height:14px;
                                line-height:14px;
                                text-align:center;
                                border-radius:2px;
                                background:#d9d9d9;
                                margin-right:10px;
                            }
                        }
                    }
                }
            }
        }
        .page-bottom{
            .panel-left{
                // margin-top:-30px;
                background:none;
               &>.panel{
                    margin-bottom:16px;
                    padding:6px 0 5px 20px;
                    font-size:14px;
                    img{
                        width:55px;
                    }
                    b{
                        padding-left:25px;
                    }
                }
                &>.panel:last-child{
                    margin-bottom:0;
                }
            }
            .panel-right{
                height: 235px;
                .panel-heading{
                    border-bottom:1px solid #e5e5e5;
                    height: 50px;
                    b{  
                        display:block;
                        color:@mainColor;
                        font-size:16px;
                        margin-top:-2px;
                    }
                    i{
                        display:inline-block;
                        width:22px;
                        height:20px;
                        background:url("../images/6.png");
                        margin-right:5px;
                        position:relative;
                        top:3px;
                    }
                }
                .panel-body{
                    padding:0;

                    li{
                        border-left:1px solid #e5e5e5;
                        padding:20px 0;
                        width:25%;
                        height: 183px;
                        div{
                            width:90px;
                            height:90px;
                            margin:0 auto;
                            border-radius:50%;
                            background:@mainColor;
                            text-align:center;
                            line-height:90px;
                            img{
                                vertical-align:middle;
                                margin:0 auto;
                            }
                        }
                         p{
                             text-align:center;
                             font-size:14px;
                             margin-top:10px;
                        }
                    }
                    li:first-child{
                        border:none;
                    }
                }
            }
        }
    }
    section#notice{
        .panel-left{
            width:22%;
            margin-right:1%;
            .panel-body{
                li{
                    a{
                        display:block;
                        font-size:14px;
                        line-height:30px;
                        padding-left:10px;
                        i{
                            display:inline-block;
                            width:28px;
                            height:28px;
                            position:relative;
                            top:6px;
                            margin-right:5px;
                        }
                        i.notice{
                            background:url("../images/notice28-1.png")
                        }
                        i.write{
                            background:url("../images/write1.png")
                        }
                        i.receive{
                            background:url("../images/receive2.png")
                        }
                        i.send{
                            background:url("../images/send2.png")
                        }
                    }
                }
                li.active{
                    a{ 
                        background:#F2F2F4;
                        font-weight:bold;
                        i.notice{
                            background:url("../images/notice28-2.png")
                        }
                         i.write{
                            background:url("../images/write2.png")
                        }
                        i.receive{
                            background:url("../images/receive1.png")
                        }
                        i.send{
                            background:url("../images/send1.png")
                        }
                    }
                }
            }
            &>i{
                display:block;
                width:145px;
                height:129px;
                background:url("../images/noticebg.png");
                margin-top:52px;
                margin-right:0;
            }
        }
        .panel-right{
            min-height: 465px;
            .paginationBox{
                text-align:center;
                .pagination{
                  display:inline-block;
                }
            }  
            width:77%;
            .notice{
                min-height: 369px;               
            }
            .panel-heading{
                ul{
                    border-bottom: 1px solid rgb(204, 204, 204);
                  li{
                      width: 118px;
                      height: 46px;
                      a{
                          display: block;
                          width: 118px;
                          height: 46px;
                          line-height: 46px;
                          font-size: 14px;
                          text-align: center;
                          position: relative;
                          top: 1px;
                      }

                  }  
                  li.active{
                      a{
                          border-bottom: 2px solid @mainColor;//rgb(0, 155, 219);
                      }
                  }
                }
            }
            .panel-body{
                .noticeItem{
                    margin-bottom:10px;
                    a{
                        display:block;
                        line-height:20px;
                        .index{
                            width:14px;
                            height:14px;
                            line-height:14px;
                            text-align:center;
                            border-radius:2px;
                            background:#d9d9d9;
                            margin-right:10px;
                            position:relative;
                            top:3px;
                        }
                    }
                }
            }
            #receiveBox{
                .panel{
                    border-bottom:none !important;
                }
                .panel-heading{
                    border-bottom:3px solid #e5e5e5;
                    padding:10px 15px;
                    .btn-group{
                        margin-right: 10px;
                        button{
                            font-size: 12px;
                            position: relative;
                            padding: 8px 10px;
                           
                            
                        }                    
                    }
                    .btn-group:first-child{
                        button{
                            // padding: 8px 26px 5px 8px;
                            input{
                                margin: 0;
                                width: 16px;
                                height: 16px;
                            }
                             .caret{
                                position: absolute;
                                top: 14px;
                                margin-left: 5px;
                            }
                        }
                        ul.dropdown-menu{
                            li{
                                width: 100%;
                                line-height:46px;
                                text-align:center;
                                cursor:pointer;
                            }
                        }
                    }
                    b{
                        font-size:14px;
                    }
                    .searchBox{
                        width:200px;
                        
                        input{
                           padding:0 12px;
                           height:28px; 
                        }
                        span{
                            cursor:pointer;
                        }       
                    }
                    .unread-email{
                        margin-top: 15px;
                        color: @mainColor;//rgb(66, 170, 224);
                    }
                    .received-email{
                        margin-top: 15px;
                        color: @mainColor;//rgb(66, 170, 224);
                    }
                }
                .panel-body{
                    padding:0 20px 10px 20px;
                    .emailItem{
                        li{
                            height: 36px;
                            border-bottom: 1px solid rgb(239, 239, 243);
                            // padding: 0;
                            padding-left: 10px;
                            input{
                               width: 16px;
                               height: 16px;
                               margin: 0;
                               display: inline-block;
                               vertical-align: middle;
                            }
                           a{
                            display: inline-block;
                            width: 95%;
                            margin-left:10px;
                            height: 36px;
                            line-height: 36px;
                            padding-left: 44px;
                            .sender-name{
                                display: inline-block;
                                width: 70px;
                            }
                            .target-name{
                                display: inline-block;
                                width: 70px;
                            }
                            } 
                            a.receive-img{
                                background: url('../images/iconicon.png') 0 -148px no-repeat;                                
                            }
                            a.send-img{
                                 background: url('../images/iconicon.png') -32px 13px no-repeat; 
                            }
                        }
                       li:hover{
                           background-color: rgb(245, 245, 245);
                       } 
                    }
                    // .btn{
                    //     font-size:12px;
                    //     padding:5px 12px;
                    //     margin-bottom:20px;
                    // }
                    // .emailItem{
                    //     border-bottom:1px solid #e5e5e5;
                    //     &>a{
                    //         display:block;
                    //     }
                    //     .img{
                    //         width:50px;
                    //         height:50px;
                    //         border-radius:50%;
                    //         overflow:hidden;
                    //         margin-top:8px;
                    //         img{
                    //             width:100%;
                    //         }
                    //     }
                    //     .middle{
                    //         padding:16px 20px;
                    //         .name{
                    //             display:inline-block;
                    //             margin-bottom:5px;
                    //         }
                    //         div{
                    //             width:480px;
                    //             overflow:hidden;
                    //             text-overflow:ellipsis;
                    //             -o-text-overflow:ellipsis;
                    //             white-space: nowrap;

                    //             .content{
                    //                 color:#aaa;
                    //             }
                    //         }
                            
                    //     }
                    //     .right{
                    //         padding:16px 20px;
                    //         &>i{
                    //             display:block;
                    //             width:28px;
                    //             height:28px;
                    //             margin:0 auto;
                    //             background:url("../images/dustbin.png");
                    //             margin-top:-6px;
                    //         }
                    //     }
                    // }
                }
            }
            #sendBox{
                padding:20px;
                label{
                    display:block;
                    width:10%;
                    font-weight:normal;
                    text-align:right;
                    height:20px;
                    // padding-right:10px;
                    padding:9px 12px 6px 12px;
                }
                select{
                    width:50%;
                }
                input{
                    width:50%;
                }
                textarea{
                    width:85%;
                    height:200px;
                }
                button{
                    margin-left:10%;
                    margin-top:10px;
                    padding:6px 30px;
                }
            }
            #emailDetail{
                .panel-heading{
                    padding:5px 12px;
                    border-bottom:1px solid #eee;
                   a{
                        display:inline-block;
                        width:28px;
                        height:28px;
                    }
                    &>.left{
                        width:10%;
                        a{
                            background:url("../images/back.png") 0 -5px;
                        }
                    }
                    &>.middle{
                        width:80%;
                        text-align:center;
                        line-height:28px;
                        height:28px;
                    }
                    &>.right{
                        text-align:right;
                        width:10%;
                        a{
                            background:url("../images/dustbin.png") 0 -5px;
                        }
                    }
                }
                .panel-body{
                   
                    .title{
                        font-size:14px;
                        font-weight:bold;
                        margin-bottom:10px;
                    }
                    .content{
                        margin-bottom:40px;
                    }
                    .date{
                        text-align:right;
                        margin-bottom:40px;
                    }
                    .reply{
                        textarea{
                            height:100px;
                        }
                    }
                }
            }
        }    
    }
    section#noticeDetail{
        .panel{
            min-height:500px;
            margin-bottom:0px;
            padding: 20px 50px;
            .panel-heading{
                padding-bottom:0px;
                p{
                    font-size:18px;
                    text-align:center;
                    margin-bottom:10px;
                }
                &>div{
                    font-size:14px;
                    text-align:center;
                    span{
                        margin:0 10px;
                        color: rgb(102, 102, 102);
                        // i{
                        //     margin-right:5px;
                        // }
                    }
                }                    
           
            }
            .panel-body{
                p{  
                    font-size:14px;
                    line-height:25px;
                    text-indent:20px;
                    margin-bottom:5px;
                    color: rgb(51, 51, 51);
                }
            }
        }  
    }
    section#user{
        .panel-left{
            width:22%;
            margin-right:1%;
            padding:10px 30px 65px 30px;
            .panel-heading{
               .img{
                    width:66px;
                    height:66px;
                    img{
                        width:100%;
                    }
                }
                .userName{
                    margin-left:15px;
                    margin-top:15px;
                    p{
                        margin-top:5px;
                    }
                }
            }
            .panel-body{
               
                li{
                    a{
                        display:block;
                        font-size:14px;
                        line-height:30px;
                        padding-left:10px;
                        padding-bottom:2px;
                        i{
                            display:inline-block;
                            width:28px;
                            height:28px;
                            position:relative;
                            top:6px;
                            margin-right:5px;
                        }
                        i.notice{
                            background:url("../images/icon1.png")
                        }
                        i.receive{
                            background:url("../images/icon3.png")
                        }
                        i.send{
                            background:url("../images/icon5.png")
                        }
                    }
                }
                li:first-child{
                        border-top: 1px solid rgb(205, 205, 205);
                    }
                li.active{
                    a{ 
                        background:#F2F2F4;
                        font-weight:bold;
                        i.notice{
                            background:url("../images/icon2.png")
                        }
                        i.receive{
                            background:url("../images/icon4.png")
                        }
                        i.send{
                            background:url("../images/icon6.png")
                        }
                    }
                }
            }
            &>i{
                display:block;
                width:145px;
                height:129px;
                background:url("../images/noticebg.png");
                margin-top:52px;
                margin-right:0;
            }
        }
        .panel-right{
            width:77%;
            padding:10px 30px;
            min-height: 784px;
            #userInfo{
                
                .title{
                    position:relative;
                    b{ 
                        position:absolute;
                        top:-9px;
                        left:0;
                        display:inline-block;
                        padding-right:8px;
                        background:#fff;
                        font-size:14px;
                    }
                }
                .content{
                    &>div{
                        line-height:30px;
                        span{
                            display:inline-block;
                        }
                        .span1{
                            width:58px;
                            text-align:right;
                            margin-right:20px;
                        }
                    }
                    
                }
            }
            #password{
                padding:15px 30px 51px 30px;
                label{
                    display:inline-block;
                    margin-bottom:0;
                    margin-right:15px;
                    width:60px;
                    line-height:32px;
                    font-weight:normal;
                    text-align:right;
                }
                input{
                    width:300px;
                }
                button{
                    color:#fff;
                    background:@mainColor;
                    margin-left:65px;
                }
            }
            #score{
                .top{
                    b{
                        font-size:14px;
                    }
                    div{
                        padding:7px 0;
                        i{
                            display:inline-block;
                            width:20px;
                            height:18px;
                            background:url("../images/4.png");
                            position:relative;
                            top:6px;
                            margin-right:5px;
                        }
                        span{
                            font-weight:bold;
                            color:#f00;
                            padding:0 5px;
                        }
                    }
                    button{
                        margin-right:10px;
                        margin-bottom:15px;
                        background:#e5e5e5;
                        color:#333; 
                        font-size: 14px; 
                    }
                    button.active{
                        background:@mainColor;
                        color:#fff;
                    }
                }
                .middle{
                    margin-bottom:10px;
                    .first{
                        i{
                            display:inline-block;
                            width:28px;
                            height:28px;   
                            background:url("../images/list.png");
                            margin-right:5px;
                            position:relative;
                            top:7px;
                        }
                        font-size:14px;
                    }
                    .second{
                        position:relative;
                        top:18px;
                        span{
                            font-weight:bold;
                            color:#f00;
                            padding:0 5px;
                        }
                    }
                    
                }
                th,td{
                    padding:0;
                    height:35px;
                    line-height:35px;
                    text-align:center;
                    font-weight:normal;
                }
               
                .courseName{
                    display:block;
                    width:90px;
                    margin:0 auto;
                    text-align:left;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                }
            }
        }
    }
    section#teachPlan{       
        #courseSelect{
             .panel{               
                .panel-body{
                    padding:30px;
                    .top{
                        .right{
                            height: 133px;
                            .top{
                                margin-bottom:30px;

                                b{
                                    font-size:16px;
                                   
                                }
                                i{
                                    display:inline-block;
                                    width:28px;
                                    height:28px;
                                    background:url("../images/course.png");
                                    position:relative;
                                    top:5px;
                                    margin-right:5px;
                                     margin-top:5px;
                                }
                               span{
                                   color:#f00;
                                   margin:0 5px;
                               }
                            }
                        }
                    }
                    .bottom{
                        margin-top:30px;
                        min-height: 197px;
                        &>div{
                            margin-bottom:10px;
                            .left{
                                font-size:16px;
                                font-weight:bold;
                                i{
                                    display:inline-block;
                                    width:28px;
                                    height:28px;
                                    background:url("../images/list.png");
                                    position:relative;
                                    top:5px;
                                    margin-right:5px;
                                     margin-top:5px;
                                }
                            }
                            .right{
                                span{
                                    color:#f00;
                                    margin:0 5px;
                                }
                            }
                        }
                        .submit{
                            text-align:center;
                        }
                    }
                }
            }
        }
        #scoreComponent{
            min-height: 455px;
             &>.panel{
                &>.panel-body{
                    padding:30px;
                    min-height: 455px;
                    &>.top{                     
                        .right{
                            height: 123px;
                            .top{
                                margin-bottom:30px;
                                b{
                                    font-size:16px; 
                                }
                                i{
                                    display:inline-block;
                                    width:28px;
                                    height:28px;
                                    background:url("../images/component.png");
                                    position:relative;
                                    top:6px;
                                    margin-top:5px;
                                }
                               span{
                              
                                   margin:0 5px;
                               }
                               s{
                                   display:inline-block;
                                   height:12px;
                                   border-right:1px solid #666;
                                   margin-left:7px;
                                   position:relative;
                                   top:2px;
                               }
                            }
                        }
                    }
                    &>.bottom{
                        margin-top:30px;
                        height: 241px;
                        .title{
                            margin-bottom:10px;
                            padding-bottom:10px;
                            border-bottom:2px solid @mainColor;
                            .left{
                                font-size:16px;
                                font-weight:bold;
                                i{
                                    display:inline-block;
                                    width:28px;
                                    height:28px;
                                    background:url("../images/study.png");
                                    position:relative;
                                    top:5px;
                                    margin-right:5px;
                                }
                            }
                            .right{
                                position:relative;
                                top:16px;
                                span{
                                    color:#f00;
                                    margin:0 5px;
                                }
                            }
                        }
                        .courseList{
                            .courseItem{
                                width:232px;
                                border:1px solid #e5e5e5;
                                margin-left: 10px;
                                margin-right:50px;
                                margin-bottom:10px;
                                &>div{
                                    padding:10px 20px;
                                    border-bottom:1px solid #e5e5e5;  
                                }
                                .heading{
                                    position:relative;
                                    padding-left:40px;
                                    i{
                                        display:inline-block;
                                        width:28px;
                                        height:28px;
                                        background:url("../images/book.png");
                                        position:absolute;
                                        top:2px;
                                        left:13px;
                                    }
                                    span{
                                        font-size:14px;
                                    }
                                }
                                .body{
                                    p{
                                        line-height:25px;
                                    }
                                }
                                .more{
                                    text-align:center;
                                }
                            }
                            .courseItem:nth-child(4n){
                                margin-right:0;
                            }
                        }
                    }
                }
            }
        }
    }
    section#course{
        #courseStudy{
             &>.panel{                
                 &>.panel-body{
                    padding:30px;
                    height: 100%;
                    &>.top.clearfix{
                        height: 123px;
                        &>div.right{
                            height: 123px;
                            &>.top{                            
                                margin-bottom:30px;
                                height: 60px;
                                b{
                                    font-size:16px; 
                                    display: block;                               
                                }
                                i{
                                    display:inline-block;
                                    width:28px;
                                    height:28px;
                                    background:url("../images/icon8.png");
                                    position:relative;
                                    top:5px;
                                    margin-right:5px;
                                     margin-top:5px;
                                }
                               span{
                                   color:#f00;
                                   margin:0 5px;
                               }
                            }
                            &>.bottom{
                                height: 61px;
                            }
                        }
                    }
                    &>.bottom{
                        min-height: 230px;
                        margin-top:30px;
                        &>div{
                            margin-bottom:10px;
                            .left{
                                font-size:16px;
                                font-weight:bold;
                                position:relative;
                                padding-left:30px;
                                i{
                                    display:inline-block;
                                    width:28px;
                                    height:28px;
                                    background:url("../images/list.png");
                                    position:absolute;
                                    top:-7px;
                                    left:0;
                                }
                            }
                            .right{
                                span{
                                    color:#f00;
                                    margin:0 5px;
                                }
                            }
                        }
                        &>ul{
                            margin-top:15px;
                            li{
                                border:1px solid #e5e5e5;
                                padding:5px;
                                margin-right:15px;
                                margin-bottom:20px;
                                width:210px;
                                a{
                                    display:block;
                                    .top{
                                        width:198px;
                                        height:208px;
                                        overflow:hidden;
                                        img{
                                            width:100%;
                                            height: 208px;
                                        }
                                    }
                                    // .middle{
                                    //     margin:3px 0 3px 0;
                                    //     color:#333;
                                    // }
                                    .bottom{
                                        margin-top: 10px;
                                        &>span{
                                           display:block;
                                           padding:0px 7px;
                                           font-size:12px;
                                            border:1px solid @mainColor;
                                            color:@mainColor;
                                            border-radius:8px;
                                        }
                                        &>div{
                                            padding-top:3px;
                                            position:relative;
                                            // padding-left:30px;
                                            i{
                                                display:inline-block;
                                                width:28px;
                                                height:28px;
                                                background:url("../images/icon7.png");
                                                position:absolute;
                                                top:-8px;
                                                left:2px;
                                            }
                                        }
                                    }
                                }
                                
                            }
                        }
                    }   
                }
            }
        }
        #wareView{
            .playerContainer{
                width:1190px;
                height:600px;
                margin:0 auto;
                background:#252525;
                border:1px solid #fff;
                .panel-heading{
                    background:#fff;
                    height:50px;
                    line-height:28px;
                    border:1px solid #fff;
                    .left{
                        font-size:18px;
                        span{
                            color:@mainColor;
                            margin-right:5px;
                        }
                    }
                }
                .panel-body{
                    height:550px;
                    padding:0;
                    &>.left{
                        width:890px;
                        height:100%;
                        background:#333;
                        .playerBox{
                            height:500px;
                        }
                        .panel-footer{
                            background:#fff;
                            height:50px;
                            line-height:29px;
                            .starBox{
                                i.rate{
                                    margin-right:5px;
                                }
                                i.icon{
                                    font-size:14px;
                                    color:#ccc;
                                }
                                i.active{
                                    color:#fe9901;
                                }
                            }
                        }
                        .video-js {
                            width: 890px;
                            height: 500px;
                        }
                    }
                    &>.right{
                        width:298px;
                        height:40px;
                        background:#3a3a3a;
                        color:#A8A8A8;
                        .topTitle{
                            width:298px;
                            color:#fff;
                            padding:0 10px;
                            div{
                                width:60px;
                                text-align:center;
                                height:40px;
                                font-size:14px;
                                line-height:40px;
                                border-bottom:2px solid transparent;
                                margin-right:20px;
                                color:#A8A8A8;
                                cursor:pointer;
                            }
                            div.active{
                                border-bottom:2px solid @mainColor;
                                color:#fff;
                            }
                        }
                        .rightContainer{
                            padding:10px 0 10px 10px;
                            .wareList{
                                height:490px;
                                overflow:hidden;
                                overflow-y:auto;
                                .wareItem{
                                    position:relative;
                                    margin-bottom:10px;
                                    .img{
                                        width:115px;
                                        height:65px;
                                        overflow:hidden;
                                    position:relative;
                                        img{
                                            width:100%;
                                        }
                                        span{
                                            position:absolute;
                                            bottom:0px;
                                            right:0px;
                                            color:#ccc;
                                            margin-right:5px;
                                        }
                                    }
                                    .right{
                                        margin-left:5px;
                                        width:153px;
                                        padding-top:10px;
                                        p{
                                            margin-bottom:5px;
                                            width:100%;
                                            overflow:hidden;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                        }
                                    }
                                    &.active{
                                        background:#3a3a3a;
                                    }
                                    .complete{
                                        width:54px;
                                        height:54px;
                                        background:url("../images/complete.png");
                                        position:absolute;
                                        right:0;
                                        z-index:100;
                                    }
                                }
                            }
                            .noteBox{
                                .inputBox{
                                     text-align:center;
                                      background:#3D3D3D;
                                      padding-bottom:5px;
                                    .form-group{
                                        margin-bottom:5px;
                                        padding:5px 5px 0 5px;
                                        textarea{
                                            width:100%;
                                            max-width:100%;
                                            height:100px;
                                            max-height:100px;
                                            background:#3D3D3D;
                                            outline:none;
                                        }
                                    }
                                }
                                .noteLists{
                                    height:340px;
                                     overflow:hidden;
                                    overflow-y:scroll;
                                   
                                    .noteItem{
                                        background:#3d3d3d;
                                        margin:5px 0;
                                        div{
                                            padding:5px;
                                            max-width:100%;
                                            overflow:hidden;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                        }
                                    }  
                                }
                            }
                        }
                    }
                }
            }
            .courseInfo{
                margin-top:30px;
                height:250px;
                &>.left{
                    width:890px;
                    padding:20px 20px 30px 20px;
                    .imgBox{
                        width:144px;
                        img{
                            width:100%;
                        }
                    }
                    .courseDetail{
                        padding:20px 0 0 20px;
                        width:700px;
                        .title{
                            b{
                                font-size:16px;
                            }
                        }
                        .tag{
                            margin:10px 0;
                            span{
                                display:inline-block;
                                padding:3px 10px;
                                border:1px solid #aaa;
                                border-radius:8px;
                                margin-right:5px;
                            }
                        }
                        .content{
                            line-height:25px;
                        }
                    }
                }
                &>.right{
                    width:298px;
                    background:#F7F7F7;
                    height:100%;
                    padding:40px 20px 30px 20px;
                     .title{
                            b{
                                font-size:16px;
                            }
                            margin-bottom:10px;
                        }
                    .content{
                            line-height:25px;
                        }
                }
            }
            .questionBox{
                margin-top:20px;
                padding:20px;
                background:#fff;
                .askQuestion{
                    padding:10px;
                    background:#FAFAFC;
                    .title{
                        margin-bottom:7px;
                        i{
                            display:inline-block;
                            width:28px;
                            height:28px;
                            background:url("../images/icon20.png")
                        }
                        span{
                            position:relative;
                            top:-8px;
                            left:10px;
                        }
                    }
                    textarea{
                        height:120px;
                    }
                    .btnBox{
                        text-align:right;
                    }
                }
                .questionContainer{
                    .panel-heading{
                        border-bottom:1px solid @mainColor;
                        span{
                            display:inline-block;
                            padding:0 10px;
                            font-size:14px;
                            cursor:pointer;
                        }
                        span.active{
                            color:@mainColor;
                        }
                    }
                    // .panel-body{
                    //     .questions,.creamQuestions,.myQuestions{

                    //     }
                    // }
                     .questionItem{
                        cursor:pointer;
                        border-bottom:1px solid #e5e5e5;
                        padding-bottom:30px;
                        margin-bottom:20px;
                        .title{
                            margin-bottom:5px;
                            .num{
                                border:1px solid #ddd;
                                font-size:14px;
                                width:22px;
                                height:22px;
                                text-align:center;
                                line-height:22px;
                                border-radius:5px;
                                margin-right:10px;
                                margin-top:-2px;
                            }
                            .titleContent{
                                width:1085px;
                                line-height:18px;
                                font-size:14px;
                                span{
                                    display:inline-block;
                                    width:18px;
                                    text-align:center;
                                    background:@mainColor;
                                    color:#fff;
                                    margin-right:3px;
                                    border-radius:5px;
                                }
                                i{
                                    font-size: 12px;
                                    color: rgb(102, 102, 102);
                                }
                            }
                        }
                        .content{
                            width:1090px;
                            padding-left:30px;
                            margin-bottom:10px;
                            line-height:23px;
                            font-size: 12px;
                            color: rgb(102, 102, 102);
                        }
                        .questionOther{
                            padding-left:25px;
                            color: rgb(102, 102, 102);
                            i{
                                display:inline-block;
                                width:28px;
                                height:28px;
                                position:absolute;
                                top:-10px;
                                left:0px;
                            }
                            .first i{
                                background:url("../images/icon1.png")
                            }
                            .second i{
                                background:url("../images/dialogue.png")
                            }
                            div{
                                position:relative; 
                                padding-left:28px;
                            }
                        }
                        .answer{
                            margin-left:30px;
                            margin-top:10px;
                            background:#FAFAFC;
                            padding:30px 20px;
                            .answerList{
                                .answerContent{
                                    color: rgb(51, 51, 51);
                                    span{
                                        color:@mainColor;
                                    }
                                }
                                .answerDate{
                                    text-align:right;
                                }
                            }
                            .replyBox{
                                margin-top:30px;
                                textarea{
                                    height:100px;
                                }
                            }
                            .buttonBox{
                                text-align:right;
                            }
                        }
                }
                }
               
            }
        }
        #courseLive{
            .panel{
                height: 685px;
                .panel-body{
                    height: 685px;
                     padding:30px;
                     .top{
                         height: 211px;
                     }
                     .title{
                            border-top:1px solid #ccc;
                            margin-bottom:20px;
                            &>div{
                                width:90px;
                                margin-top:-8px;
                                background:#fff;
                                position:relative;
                                padding-left:33px;
                                i{
                                    display:inline-block;
                                    width:28px;
                                    height:28px;
                                    background:url("../images/hot.png");
                                    position:absolute;
                                    top:-8px;
                                    left:0px;
                                }
                            }
                        }
                     ul{
                        li{
                            border:1px solid #e5e5e5;
                            border-bottom-left-radius:8px;
                            border-bottom-right-radius:8px;
                            margin-right:16px;
                            margin-bottom:20px;
                            .top{
                                width:220px;
                                height:123px;
                                border-radius:5px;
                                border-bottom-left-radius:0;
                                border-bottom-right-radius:0;
                                overflow:hidden;
                                img{
                                    width:100%;
                                }
                            }
                            .bottom{
                                padding:10px;
                                .right{
                                    position:relative;
                                    padding-left:30px;
                                    i{
                                        display:inline-block;
                                        width:28px;
                                        height:28px;
                                        background:url("../images/eye.png");
                                        position:absolute;
                                        top:-13px;
                                        left:3px;
                                    }
                                    span{
                                        margin-left:5px;
                                    }
                                    span.live{
                                        color:#90BC5F;
                                    }
                                    span.closed{
                                        color:#aaa;
                                    }
                                }
                                
                            }
                        }
                        li:nth-child(4n){
                            margin-right:0;
                        }
                    }
                    &>div.bottom{
                        margin-top:20px;
                        .title{
                            i{
                                background:url("../images/tv.png");
                            }
                        }
                    }
                }
            }
           
        }
        #liveRoom{   
            padding: 0;
            //左边的视频播放部分
            .video-box{
                width: 880px;
                margin-right: 10px;
                .panel-heading{
                    border: 1px solid rgb(215, 215, 215);
                    border-radius: 3px;
                    .panel-title{
                        padding: 10px 15px;
                        p{
                            font-size: 16px;
                            margin-bottom: 10px;
                        }
                        ul{
                            li{
                                font-size: 12px;
                                margin-right: 20px;
                                em{
                                    display: inline-block;                    
                                    background:url('../images/icon111.png') 0 -45px no-repeat;
                                    margin-right: 8px;
                                }                  
                            }
                            li:nth-child(1){
                                em{
                                    width: 10px;
                                    height:12px;
                                    // background-position:0 -45px;
                                }
                                }
                            li:nth-child(2){
                                em{
                                    width: 14px;
                                    height:12px;
                                    background-position: 0 -66px;
                                }
                            }
                            li:nth-child(3){
                                em{
                                    width: 16px;
                                    height: 12px;
                                    background-position: 0 -87px;
                                }
                            }
                        }
                     }
                }
                
                .panel-body{
                    margin-top: 10px;
                    width: 880px;
                    height: 493px;
                    padding: 0;
                    #video{
                        width: 100%;
                        height: 100%;
                        background-color: rgb(0, 0, 0);
                        border-radius: 3px;
                    }
                }
            }
            //右边的讨论区
            .discuss{
                width: 298px;
                box-sizing: border-box;  
                height: 595px;
                margin-bottom: 0px;    
                &>.panel-heading{
                    width: 300px;
                    border: 1px solid rgb(215, 215, 215);
                    padding: 0;
                    &>.panel-title{
                        width: 300px;
                        box-sizing: border-box;  
                        border-bottom: none;            
                        &>ul{
                            width: 300px;
                            height: 30px;
                            box-sizing: border-box;
                            border-bottom: none;
                            &>li{
                                &>a{
                                    display: inline-block;
                                    width: 147px;
                                    height: 28px;
                                    line-height: 28px;
                                    padding: 0;
                                    padding-top: 3px;
                                    font-size: 14px;
                                    text-decoration: none;
                                    color: rgb(102, 102, 102);      


                                    border: none;
                                    background-color: rgb(236, 236, 236);
                                }                     
                            }  
                            &>li.active{                                      
                                &>a{
                                    background: rgb(255, 255, 255);
                                    border-top: 3px solid rgb(23, 171, 81);
                                    padding-top: 0px;
                                }
                            }
                        }
                    &>div{
                            font-size: 12px;
                            height: 72px;
                            line-height: 16px;
                            padding: 20px;
                            &>em{
                            display: inline-block;
                            width: 27px;
                            height: 16px;
                            background: url('../images/icon111.png') 0 -107px no-repeat;                 
                        }
                        }     
                    }
                }
                &>.panel-body{
                    padding: 0px;
                    height: 406px;
                    width: 300px;
                    box-sizing: border-box;
                    &>.discuss-about,&>.whom{
                        background-color: rgb(248, 248, 248);
                        height: 406px;
                        width: 300px;
                        overflow:hidden;
                        overflow-y:scroll;
                        padding: 10px 20px;
                        box-sizing: border-box;
                        border: 1px solid rgb(215, 215, 215);
                        border-top: 0;
                        border-bottom: 0;
                        &>li{
                            font-size: 12px;
                            line-height: 30px;
                            &>span{
                                color: rgb(25, 185, 87);                       
                            }
                            
                        }

                    }
                    &>.whom{
                        &>li{
                            background: url('../images/icon111.png') 0 -128px no-repeat;
                            padding-left: 26px;
                        }
                    }

                }
                &>.panel-footer{
                    width: 300px;
                    height: 85px;
                    padding: 0;
                    background-color: rgb(255, 255, 255);
                    border: 1px solid rgb(215, 215, 215);
                    box-sizing: border-box;
                    .message{
                        border:none;
                height: 83px;
                padding:17px 12px;
                input{
                    border:1px solid rgb(25, 185, 87);
                    width: 205px;
                    height: 50px;
                    padding: 10px;
                    border-top-left-radius: 3px;
                    border-bottom-left-radius: 3px;
                }
                button{
                    width: 66px;
                    height: 51px;
                    border: 0;
                    background-color: rgb(25, 185, 87);
                    border-top-right-radius: 3px;
                    border-bottom-right-radius: 3px;
                    color: rgb(255, 255, 255);
                }
                    }
                }        
            }
        }  
        #coursework{
            // min-height: 446px;
             .panel{
                .panel-body{
                    padding:30px;
                    &>.top{
                        height: 123px;
                        .right{
                            height: 123px;
                            .top{
                                margin-bottom:30px;
                                b{
                                    font-size:16px;
                                   
                                }
                                i{
                                    display:inline-block;
                                    width:28px;
                                    height:28px;
                                    background:url("../images/icon8.png");
                                    position:relative;
                                    top:5px;
                                    margin-right:5px;
                                     margin-top:5px;
                                }
                               span{
                                   color:#f00;
                                   margin:0 5px;
                               }
                            }
                        }
                    }
                    &>.bottom{
                        margin-top:30px;
                        min-height: 213px;
                        &>div{
                            margin-bottom:10px;
                            .left{
                                font-size:16px;
                                font-weight:bold;
                                position:relative;
                                padding-left:30px;
                                i{
                                    display:inline-block;
                                    width:28px;
                                    height:28px;
                                    background:url("../images/list.png");
                                    position:absolute;
                                    top:-7px;
                                    left:0;
                                }
                            }
                            .right{
                                span{
                                    color:#f00;
                                    margin:0 5px;
                                }
                               
                            }
                        }
                         table{
                             td{
                                 height:48px;
                                 line-height:48px;
                                 padding:0;
                             }
                            .btn{
                                background:#fff;
                                color:#666;
                                font-size:12px;
                            }
                        }
                    }   
                }
            }
        }
        #courseworkDetail{
            .panel{
                .panel-heading{
                    padding: 30px 0 15px 50px;
                    ul{
                        li{
                            height:27px;
                            line-height: 27px;
                            font-size: 14px;
                        }
                        li:first-child{
                            width: 11px;
                            background: url('../images/jiantou.png') 0 -1px no-repeat;
                        }
                        li:nth-child(2){
                            background-color:@mainColor;//rgb(0, 155, 219);
                            padding: 0 8px;
                            color: #fff;
                        }
                        li:last-child{
                            width:16px;
                            background: url('../images/jiantou.png') -110px -1px no-repeat; 
                        }
                    }
                }
                .panel-body{
                    form{
                        .singleSelection,.moreSelection,.shortAnswer,.judgment-questions{
                             &>p{
                                font-size:14px;
                                margin-bottom:10px;
                                padding:0 128px;
                             }
                             .workpaperItem{
                                padding:0 128px;
                                border: 1PX solid transparent;
                                margin-bottom:10px;
                                &:hover{
                                    background: @secondaryColor;
                                    border: 1PX solid rgb(230, 230, 230);
                                } 
                                 textarea{
                                    width:100%;
                                    min-height: 150px;
                                
                                    background: rgb(251, 251, 251);
                                    border-color:rgb(230, 230, 230); 
                                }
                                .form-group{
                                   label{
                                        font-weight:normal;
                                    }
                                }
                            }
                            
                        }
                        .form-group{
                            .btn-block{
                                width:100px !important;
                                margin:0 auto;
                            }
                            
                        }
                        
                    }
                }
            }
    
        } 
        #question{
            .panel-left{
                width:22%;
                margin-right:1%;
                .panel-body{
                    li{
                        a{
                            display:block;
                            font-size:14px;
                            height: 40px;
                            line-height:40px;
                            padding-left:10px;
                            i{
                                display:inline-block;
                                width:22px;
                                height:20px;
                                position:relative;
                                top:6px;
                                margin-right:10px;
                            }
                            i.question{
                                background: url('../images/iconicon.png') -32px -26px no-repeat;
                            }
                            i.essence{
                                background:url("../images/iconicon.png") -32px -59px no-repeat;
                            }
                            i.mine{
                                background:url("../images/iconicon.png") -32px -88px no-repeat;
                            }
                            i.send{
                                background:url("../images/iconicon.png") -32px -120px no-repeat;
                            }
                        }
                    }
                    li.active{
                        a{ 
                            background:#F2F2F4;
                            font-weight:bold;
                            i.question{
                                background: url('../images/iconicon.png') -71px -26px no-repeat;
                            }
                            i.essence{
                                background:url("../images/iconicon.png") -71px -56px no-repeat;
                            }
                            i.mine{
                                background:url("../images/iconicon.png") -71px -88px no-repeat;
                            }
                            i.send{
                                background:url("../images/iconicon.png") -71px -120px no-repeat;
                            }
                        }
                    }
                }
                &>i{
                    display:block;
                    width:145px;
                    height:129px;
                    background:url("../images/noticebg.png");
                    margin-top:52px;
                    margin-right:0;
                }
            }
            .panel-right{
                width:77%;
                .paginationBox{
                    text-align:center;
                    .pagination{
                    display:inline-block;
                    }
                }  
                #questionContainer{
                    min-height: 833px;
                    .panel{
                        min-height: 833px;
                        .panel-body{
                            min-height: 833px;
                            padding:20px;
                            &>.top{
                                height: 76px;
                                .right{
                                    .top{
                                        margin-bottom:20px;
                                        b{
                                            font-size:16px; 
                                        } 
                                    }
                                }
                            }
                            &>.bottom{
                                margin-top:30px;
                                .clearfix{
                                   height: 34px;
                                }
                                &>div .left{
                                    select{
                                        width:150px;
                                    }
                                }
                                &>div .right{
                                    .input-group{
                                        width:250px;
                                    }  
                                }
                                label{
                                    line-height:30px;
                                    font-size:14px;
                                    width:80px;
                                    text-align:center;
                                }
                                .form-control{
                                    height:30px;
                                }
                                ul{
                                    margin-top:10px;
                                    padding-top:10px;
                                    border-top:2px solid @mainColor;
                                    li{
                                        margin:15px 0;
                                        border-bottom:1px solid #eee;
                                        padding-bottom:20px;
                                        a{
                                            .title{
                                                margin-bottom:10px;
                                            }
                                            &>.left{
                                                width:70%;
                                                &>.title{
                                                    i{
                                                        border:1px solid #666;
                                                        padding:0px 3px;
                                                        margin-right:10px;
                                                        border-radius:3px;
                                                        font-style:normal;
                                                    }
                                                    b{
                                                        color:#333;
                                                    }
                                                }
                                                &>.content{
                                                    padding-left:26px;
                                                }
                                            }
                                            &>.right{
                                                width:15%;
                                                &>.title{
                                                    position:relative;
                                                    padding-left:20px;
                                                    i{
                                                        display:inline-block;
                                                        width:28px;
                                                        height:28px;
                                                        background:url("../images/icon1.png");
                                                        position:absolute;
                                                        top:-11px;
                                                        left:-7px;
                                                    }
                                                }
                                                &>.content{
                                                    &>.left{
                                                        position:relative;
                                                        padding-left:20px;
                                                        i{
                                                            display:inline-block;
                                                            width:28px;
                                                            height:28px;
                                                            background:url("../images/dialogue.png");
                                                            position:absolute;
                                                            top:-10px;
                                                            left:-7px;
                                                        }
                                                        span{
                                                            margin:0 5px 0 4px;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }   
                        }
                    }
                }
                #askQuestion{
                    .panel-body{
                        padding:20px;
                        form{
                           
                            &>.top{
                                label{
                                    line-height:30px;
                                    font-size:14px;
                                    width:80px;
                                    text-align:center;
                                }
                                select{
                                    width:200px;
                                    height:30px;
                                }
                            }
                        &>.bottom{
                            border-top:1px solid @mainColor;
                            padding-top:20px;
                            label{
                                line-height:30px;
                                font-size:14px;
                                font-weight:normal;
                            }
                            input,textarea{
                                
                                background:@secondaryColor;
                            }
                            textarea{
                                height:150px;
                            }
                        }
                        }
                        
                    }
                }
                #questionDetail{
                    .panel{
                        .panel-heading{
                            padding: 0;
                            .panel-title{
                                font-size: 16px;
                                border-top: 3px solid @mainColor;
                                border-bottom: 1px solid rgb(204, 204, 204);
                                padding: 14px 28px;
                                a{
                                    display: inline-block;
                                    width: 17px;
                                    height: 15px;
                                    background: url('../images/icon.png') 0 -159px no-repeat;
                                    // margin-right: 10px;
                                    cursor: pointer;
                                }
                            }
                        }
                        .panel-body{
                            padding: 0;
                            position: relative;
                            .left{
                                width: 20%;
                                background-color: rgb(250, 250, 252);
                                position: absolute;
                                top: 0;
                                left: 0;
                                bottom: 0;
                                .photoBox{
                                    padding: 20px 40px;
                                    a{
                                    display: block;
                                    width: 100%;
                                    text-decoration: none;
                                    color: rgb(128, 128, 128);
                                    .myPhoto{
                                        width: 85px;
                                        height: 85px;
                                        border-radius: 50%;
                                        background-color: @mainColor;
                                        background: url('../images/icon30.png') no-repeat;
                                        margin: 0 auto;
                                    }
                                    .myName{
                                        margin-top: 10px;
                                    }
                                }
                                }
                                
                            }  
                            .right{
                                width: 78%;
                                margin-left: 22%;
                                // margin-right: 20%;
                                .discussArea{
                                    .myAsk{
                                        padding: 10px 0 50px;
                                        &>h6{
                                            margin-top: 40px;
                                            padding-right: 20px;
                                            em{
                                                width: 16px;
                                                height: 15px;
                                                display: inline-block;
                                                background: url('../images/icon.png') 0 -241px no-repeat;
                                                margin-right: 5px;
                                                vertical-align: middle;
                                            
                                            }
                                            span{
                                                display: inline-block;
                                                height: 20px;
                                                line-height: 20px;
                                                color: rgb(127, 127, 127);
                                              
                                            }
                                        }
                                        // &>h5{
                                        //     em{
                                        //         display: inline-block;
                                        //         width: 17px;
                                        //         height: 15px;
                                        //         background: url('../images/icon.png') 0 -159px no-repeat;
                                        //         margin-right: 30px;
                                        //     }
                                        // }
                                    .backColor{
                                        background-color: rgb(250, 250, 252);
                                        padding: 20px;
                                            .answers{                       
                                            li{
                                                em{
                                                    display: inline-block;
                                                    width: 35px;
                                                    height: 35px;
                                                    border-radius: 50%;
                                                    background: url('../images/icon.png') 0 -187px no-repeat;
                                                    vertical-align: top;
                                                    margin-right: 10px;
                                                }
                                                div{
                                                    display: inline-block;
                                                    width: 625px;
                                                    // height: 35px;
                                                    line-height: 22px;
                                                    word-break:break-all;
                                                    b{
                                                        font-weight: normal;
                                                        color: @mainColor;
                                                    }
                                                }
                                                &>h6{
                                                    margin-top: 10px;
                                                    margin-bottom: 10px;
                                                    padding-right: 10px; 
                                                    color: rgb(127, 127, 127);
                                                }
                                            }
                                        }
                                        h5{
                                            margin-top: 40px;
                                            margin-bottom:10px;
                                            em{
                                                display: inline-block;
                                                width: 18px;
                                                height: 18px;
                                                background: url('../images/icon.png') 0 -266px no-repeat;
                                                vertical-align: middle;
                                                margin-right: 10px;
                                            }
                                        
                                        }
                                        form{
                                            textarea{
                                                border: 2px solid @mainColor;//rgb(126, 193, 230);
                                                width: 100%;
                                                height: 200px;
                                            }
                                            button{
                                                background: @mainColor;//rgb(34, 114, 194);
                                                margin-top: 15px;
                                                color: rgb(255, 255, 255);
                                            }
                                        }
                                    }
                                    }
                                }
                            
                            }                                                                                                                                                                                                                                     
                        }
                    }
                }
            }     
        }
        #examPrepare{
            min-height: 1682px;
            .panel-body{
                .right{
                    .top{
                        b{
                            font-size: 14px;
                            display: block;
                            margin-bottom: 20px;
                        }
                    }                   
                }
                div.courses{
                    margin-top: 20px;
                    border-bottom: 3px solid @mainColor;//rgb(2, 136, 209);
                    font-size: 16px;
                    p{
                        padding: 10px 30px;
                       
                        span{
                            display: inline-block;
                            font-size: 16px;
                            position: relative;
                            border-right: 1px solid rgb(204, 204, 204);
                            padding-right: 20px;
                            margin-right: 20px;
                        }
                        span.active{
                            color: @mainColor//rgb(0, 155, 219);
                        }
                    }
                    .btn-group{
                        margin-right: 30px;
                        font-size: 12px;
                        button.active{
                            background: @mainColor;//rgb(34, 115, 194);
                            color: #fff;
                        }
                    }
                }
                div.pageContainer{
                    form{
                        .singleSelection,.moreSelection,.shortAnswer,.judgment-questions{
                             &>p{
                                font-size:14px;
                                margin-bottom:10px;
                                padding:0 128px;
                             }
                             .workpaperItem{
                                padding:10px 128px;
                                border: 1PX solid transparent;
                                margin-bottom:10px;
                                &:hover{
                                    background: @secondaryColor;
                                    border: 1PX solid rgb(230, 230, 230);
                                } 
                                 textarea{
                                    width:100%;
                                    min-height: 150px;
                                
                                    background: rgb(251, 251, 251);
                                    border-color:rgb(230, 230, 230); 
                                }
                                .form-group{
                                   label{
                                        font-weight:normal;
                                    }
                                }
                            }
                            
                        }
                        .singleSelection{
                            &>p{
                                margin-top: 10px;
                            }
                        }
                        .form-group.btnContainer{
                           text-align: center;
                            
                        }
                        
                    }
                }
                }
                
        }
    }
    section#pay{
        #paymentInfo{
            .panel{
                .panel-body{
                    padding:15px 30px;
                    .title{
                        border:2px solid @mainColor;
                        width:100px;
                        background:#fff;
                        position:relative;
                        margin-top:-17px;
                        line-height:25px;
                        padding-left:30px;
                        margin-bottom:30px;
                        i{
                            display:inline-block;
                            width:28px;
                            height:28px;
                            position:absolute;
                            top:-6px;
                            left:0;
                        }
                        b{
                            color:@mainColor;
                        }
                    }
                }
                .top{
                    position:relative;
                    border-top:2px solid @mainColor;
                    .title{
                        border-top:none;
                        i{
                            background:url("../images/txt.png")
                        }
                    }
                    ul{
                        li{
                            line-height:25px;
                            span{
                                margin-right:15px;
                            }
                        }
                    }
                }
                .middle{
                    margin-top:40px;
                    position:relative;
                    border:2px solid @mainColor;
                    .title{
                        border-bottom:none;
                        margin-top:-42px;
                        i{
                            background:url("../images/card.png")
                        }
                    }
                    p{
                        font-size:14px;
                        margin-bottom:15px;
                    }
                    ul{
                        li{
                            margin-right:15px;
                            margin-bottom:15px;
                            input{
                                margin-right:10px;
                                position:relative;
                                top:4px;
                            }
                            div{
                                display:inline-block;
                                width:148px;
                                height:32px;
                                border:1px solid #e5e5e5;
                            }
                        }
                    }
                    
                }
                
            }
        }
    }
    section#thesis{
        position: relative;
         &>.panel-left{
            width:22%;
            margin-right:1%;
            position: absolute;
            top: 16px;
            left: 0;
            bottom: 70px;
            .panel-body{
                li{
                    a{
                        display:block;
                        font-size:14px;
                        line-height:30px;
                        padding-left:10px;
                        i{
                            display:inline-block;
                            width:28px;
                            height:28px;
                            position:relative;
                            top:6px;
                            margin-right:5px;
                        }
                        i.thesisSubmit{
                            background:url("../images/thesisSubmit1.png")
                        }
                        i.thesisDefense{
                            background:url("../images/defense1.png")
                        }
                        i.degreeApply{
                            background:url("../images/degree1.png")
                        }
                        i.counselor{
                            background:url("../images/counselor1.png")
                        }
                    }
                }
                li.active{
                    a{ 
                        background:#F2F2F4;
                        font-weight:bold;
                        i.thesisSubmit{
                            background:url("../images/thesisSubmit2.png")
                        }
                        i.thesisDefense{
                            background:url("../images/defense2.png")
                        }
                        i.degreeApply{
                            background:url("../images/degree2.png")
                        }
                        i.counselor{
                            background:url("../images/counselor2.png")
                        }
                    }
                }
            }
            &>i{
                display:block;
                width:145px;
                height:129px;
                background:url("../images/noticebg.png");
                margin-top:52px;
                margin-right:0;
            }
        }
        &>.panel-right{
            background:none !important;
            width:77%;
            margin-left: 23%;
        }
        #thesisSubmit{
            &>.top{
               ul{
                   padding:0 50px;
                   li{
                       .imgBox{
                           width:102px;
                           height:88px;
                       }
                       p{
                           text-align:center;
                           background:#888686;
                           color:#fff;
                           padding:2px 0;
                           border-radius:5px;
                           margin-top:10px;
                       }
                       i{
                           display:block;
                           width:36px;
                           height:30px;
                           background:url("../images/arrow.png");
                           position:relative;
                           top:27px;
                           margin:0 20px 0 20px;
                       }
                   }
                   li.active{
                       p{
                           background:@mainColor;
                       }
                   }
                   li.topicSelect{
                       .imgBox{
                           background:url("../images/topicSelect2.png")
                       }
                   }
                   li.topicSelect.active{
                       .imgBox{
                           background:url("../images/topicSelect1.png")
                       }
                   }
                   li.thesisOutline{
                       .imgBox{
                           background:url("../images/Outline2.png")
                       }
                   }
                   li.thesisOutline.active{
                       .imgBox{
                           background:url("../images/Outline1.png")
                       }
                   }
                   li.thesisFirstDraft{
                       .imgBox{
                           background:url("../images/firstDraft2.png")
                       }
                   }
                   li.thesisFirstDraft.active{
                       .imgBox{
                           background:url("../images/firstDraft1.png")
                       }
                   }
                   li.thesisFinalDraft{
                       .imgBox{
                           background:url("../images/finalDraft2.png")
                       }
                   }
                   li.thesisFinalDraft.active{
                       .imgBox{
                           background:url("../images/finalDraft1.png")
                       }
                   }
               }
            }
            &>.bottom{
                #topicSelect{
                    min-height: 552px;
                    .panel-body{
                        p{
                            font-weight:bold;
                            font-size:18px;
                            margin-bottom:10px;
                            background:@secondaryColor;
                            line-height:40px;
                            padding:0 15px;
                        }
                        .step0{
                            
                            .top{
                                color:#f00;
                                text-align:center;
                                // margin-top:50px;
                                // margin-bottom:30px;
                                height:200px;
                                line-height:200px;
                            }
                        }
                        .step1{
                            color:#f00;
                            text-align:center;
                            .top{
                                margin-top:50px;
                                margin-bottom:30px;
                            }
                        }
                        .form-group{
                            padding:0 15px;
                            input,select{
                                background:@secondaryColor;
                            }
                            label{
                                // font-weight:normal;
                                font-size:14px;
                                margin-bottom:10px;
                            }
                            button{
                                width:100px;
                            }
                        }
                        .step3{
                            .top{
                                padding:20px 30px;
                                ul{
                                    
                                    li{
                                        line-height:20px;
                                    }
                                }
                            }
                            .bottom{
                                .result{
                                     margin:20px 0;
                                    ul{
                                        padding:0 30px;
                                       padding-top:20px;
                                        li{
                                            line-height:20px;
                                        }
                                    }
                                }
                            }
                        } 
                    }
                }
                #thesisOutline{
                    .panel-body{
                        p{
                            font-weight:bold;
                            font-size:18px;
                            margin-bottom:10px;
                            background:@secondaryColor;
                            line-height:40px;
                            padding:0 15px;
                        }
                        .step1{
                            line-height:200px;
                            text-align:center;
                            font-size:18px;
                        }
                        .step2{
                            
                            padding:0 20px;
                            padding-top:10px;
                            .input-group{
                                width:13%;
                                margin-right:10px;
                                .btn{
                                    border:none;
                                }
                                .input-group-addon{
                                    background:@mainColor;
                                    color:#fff;
                                    border:none;
                                }
                                
                            }
                            input[type="file"]{
                                    opacity: 0;
                            }
                            .fileName{
                                line-height:34px;
                            }
                        }
                        .step3{
                            .top{
                                padding:20px 30px;
                                ul{
                                    
                                    li{
                                        line-height:20px;
                                    }
                                }
                            }
                            .bottom{
                                .result{
                                     margin:20px 0;
                                    ul{
                                        padding:0 30px;
                                        padding-top:20px;
                                        li{
                                            line-height:20px;
                                        }
                                    }
                                }
                            }
                        } 
                    }
                    
                }
         
            }
        }
        #thesisDefense{
            height: 394px;
            .panel{
                height: 394px;
                    .panel-heading{
                    border-bottom:1px solid @secondaryColor;
                    padding-left:25px;
                    font-size:14px;
                    font-weight:bold;
                }
                .panel-body{
                    
                    .step1{
                        text-align:center;
                        span{
                            line-height:300px;
                        }
                    }
                    .step2{
                        text-align:center;
                        line-height:300px;
                    }
                    .step3{
                        text-align:center;
                        line-height:300px;
                    }
                    ul{
                        li{
                            span{
                                line-height:30px;
                                &.title{
                                display:inline-block;
                                width:70px;
                                text-align:right;
                                margin-right:10px;
                                }
                            }
                        
                        }
                    }
                    .result{
                        // background:url("../images/pass.png")
                        margin:-28px 0 0 200px;
                    }
                }
            }
            
        }
        #degreeApply{
            height: 394px;
            .panel{
                height: 394px;
                  .panel-heading{
                    border-bottom:1px solid @secondaryColor;
                    padding-left:25px;
                    font-size:14px;
                    font-weight:bold;
                }
                .panel-body{
                    padding-top:10px;
                    .step1{
                        text-align:center;
                        span{
                            line-height:300px;
                        }
                    }
                    .step2{
                        padding:110px 0;
                        text-align:center;
                    p{
                        margin-bottom:10px;
                    }
                    }
                    .step3{
                        text-align:center;
                        line-height:300px;
                    }
                    .step4{
                        text-align:center;
                        line-height:300px;
                    }
                }
            }
           
        }
    }
    section#library{
        .panel{
            .panel-body{
                .index{
                    height:500px;
                    line-height:500px;
                    text-align:center;
                    font-size:16px;
                }
            }
        }
    }
}
#footerDetail{
    width:@width;
    margin:0 auto;
    min-height:500px;
    padding-top:15px;
    padding-bottom:50px;
    .panel{
        border-top: 3px solid @mainColor;//rgb(0, 155, 219);
        .panel-body{
            padding: 0;
             .left{
                width: 200px;
                .foot-list{
                    li{
                        a{
                            display: block;
                            width: 200px;
                            font-size: 16px;
                            height: 48px;
                            line-height: 48px;
                            text-align: center;
                            background-color: rgb(245, 245, 245);
                        }
                       
                    }
                    li.active{
                         a{
                            background-color: @mainColor;//rgb(0, 155, 219);
                            color: rgb(255, 255, 255);
                        }
                    }
                }
                &>div{
                    background-color: rgb(245, 245, 245);
               
                    a{
                        display: block;
                        width: 160px;
                        margin: 0 auto;
                        font-size: 16px;
                        color: @mainColor;//rgb(0, 155, 219);
                        border-top: 1px solid rgb(205, 205, 205);
                        text-align: center;
                        padding-top: 30px;
                        padding-bottom: 50px;
                        cursor: pointer;
                    }
                }
            }
            .right{
                padding-left: 30px;
                .my-title{
                    font-size: 20px;
                    color: @mainColor;//rgb(6, 164, 227);
                    margin-top: 20px;    
                }
                .content{
                    p{
                        font-size: 16px;
                        margin-top: 16px;
                    }
                    a{
                        font-size: 16px;
                         color: @mainColor;//rgb(0, 155, 219);
                         
                    }
                }
            }
        }
       
    }
}